.graphiql-tabs {
  --bg: hsl(var(--color-base));

  display: flex;
  align-items: center;
  gap: var(--px-8);
  /* reset browser defaults */
  padding: 2px 0; /* Set to 2px to avoid being overflowed by focus ring */
  margin: 0;
  list-style: none;
  overflow: auto;
  border-top-left-radius: var(--border-radius-8);
}

/* Hide scrollbar */
.no-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */

  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }
}

/* trick to shrink multiple tabs, instead of overflow container */
.graphiql-tabs,
.graphiql-tab {
  min-width: 0;
}

.graphiql-tab {
  border-radius: var(--border-radius-8) var(--border-radius-8) 0 0;
  background: hsla(var(--color-neutral), var(--alpha-background-light));
  position: relative;
  display: flex;
  flex-shrink: 0;

  /* disable shrinking while changing the operation name */
  &:not(:focus-within) {
    transform: none !important;
  }

  &:hover,
  &:focus-within,
  &.graphiql-tab-active {
    background: var(--bg);
    color: hsl(var(--color-neutral));

    .graphiql-tab-close {
      display: block;
    }
  }

  .graphiql-tab-button {
    border-radius: var(--border-radius-12) var(--border-radius-12) 0 0;
    padding: var(--px-4) 28px var(--px-4) var(--px-8);

    &:hover {
      background: none;
    }
  }

  .graphiql-tab-close {
    position: absolute;
    right: min(var(--px-4), 5%);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    background: var(--bg);
    padding: var(--px-6);
    line-height: 0;

    & > svg {
      height: var(--px-8);
      width: var(--px-8);
    }

    &:hover {
      background: var(--bg);
      color: hsl(var(--color-neutral));
      overflow: hidden; /* bg in `:before` will not overflow from radius area */

      /* trick to add 2nd bg with opacity */
      &:before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: hsla(var(--color-neutral), 0.3);
      }
    }
  }
}
